html{
  overflow-y: hidden; 
  overflow-x: hidden;
}
body {
  /* width: 480px; */
  /* margin: 24px auto 0; */
  margin: 4px auto 0;
  padding-bottom: 24px;

  overflow-y: hidden; 
  overflow-x: hidden;
  
  /*image-rendering: -moz-crisp-edges;*/
  /*image-rendering: pixelated;*/
}
.title {
  margin: 16px 0 0;
  position: relative;
}
.featured-image{
	display: none;
}
.version {
  padding-left: 2%;
  font-size: 20%;
  /* use same color as url */
  color: rgba(0, 0, 0, .4);
}
.url {
  position: relative;
  background: 0;
  border: 0;
  margin: 0;
  padding: 0 0 0 32px;
  outline: 0;
  font: 300 23px/32px Helvetica Neue, Helvetica, Arial, sans-serif;
  display: block;
  width: 100%;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: rgba(0, 0, 0, .4);
}
.url:focus {
  color: #000;
}
.project-link {
  position: absolute;
  top: 0;
  left: 0;
  background-position: -160px 0;
}

a {
  color: #25d;
  text-decoration: underline;
}
a:visited {
  color: #73c;
}
a:active {
  color: #03a;
}
.dropdown {
  display: inline-block;
  position: relative;
}
.dropdown > select {
  -webkit-appearance: none;
  font: inherit;
  position: absolute;
  opacity: 0;
  cursor: pointer;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.area {
  /* overflow: hidden; */
  /* box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); */
  margin: 0 -24px;
  /* padding: 0 24px; */
  /* padding: 0 4px; */
}
#player-area, #project-area {
  height: 0;
}
#player-area {
  border-top: 1px solid silver;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}
.fs #player-area {
  overflow: visible;
}

section {
  margin: 24px 0;
}
h1,
p {
  font: 300 16px/1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
  margin: 0 0 16px;
}
h1 {
  font: 300 24px/32px Helvetica Neue, Helvetica, Arial, sans-serif;
  margin: 16px 0 0;
}
h1.title {
  font: 300 54px/72px Helvetica Neue, Helvetica, Arial, sans-serif;
  margin: 0;
}
code {
  font: 12px Menlo, Monaco, Consolas, Courier New, monospace;
  background: #f5f5f5;
  border-radius: 3px;
  padding: 3px;
}
.package a {
  padding: 2px 8px;
  background: linear-gradient(#fafafa, #e8e8e8);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .35),
    0 1px 4px rgba(0, 0, 0, .2);
  border-radius: 3px;
  cursor: pointer;
  color: #000;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.package a:hover {
  background: linear-gradient(#fff, #eaeaea);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .4),
    0 1px 4px rgba(0, 0, 0, .3);
}
.package a:active {
  background: linear-gradient(#ddd, #eaeaea);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .5),
    inset 0 2px 5px rgba(0, 0, 0, .15);
}
.package label,
.package input,
.package a,
.package span {
  display: inline-block;
  vertical-align: middle;
}
.package input[type=checkbox] {
  margin: 0 0 0 16px;
}

.xyinput{
	width: 8ch;
}

#embed-code {
  background: 0;
  border: 1px solid rgba(0, 0, 0, .4);
  margin: 0;
  padding: 4px;
  outline: 0;
  width: 80px;
  font: 12px/16px Menlo, Monaco, Consolas, Courier New, monospace;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: rgba(0, 0, 0, .7);
}
.panel-container{
  background-color: #323238;
  position: absolute;
  /* width: 480px; */
  max-width: 480px;
  height: 220px;
  min-width: 5.333333rem;
}
.key-4{
  width: 8.293333rem;
  height: 7.946667rem;
  position:absolute;
}
.panel-left-4{
  left:.533333rem;
  top:2.493333rem;
}
.f-fl{
  float: left;
}
.key{
  width: 3.573333rem;
  height: 3.573333rem;
  position: absolute;
}
.arrow-left{
  background:url(../img/left.png?imageView&quality=100) no-repeat center/contain;
}
.left{
  left: 0.873333rem;
  top: 2.573333rem;
}
.down{
  left: 4.373333rem;
  top: 5.573333rem;
  bottom: 0;
}
.arrow-down{
  background:url(../img/down.png?imageView&quality=100) no-repeat center/contain;
}
.right{
  right: 0;
  left: 7.773333rem;
  top: 2.573333rem;
}
.arrow-right{
  background:url(../img/right.png?imageView&quality=100) no-repeat center/contain;
}
.up{
  left: 4.373333rem;
  top: 0;
}
.arrow-up{
  background:url(../img/up.png?imageView&quality=100) no-repeat center/contain;
}
.space{
  width: 5.666667rem;
  height: 5.666667rem;
  position: absolute;
  /* right: .533333rem; */
  right: 1.633333rem;
  /* top:2.173333rem; */
  top:4.173333rem;
  background:url(../img/space.png?imageView&quality=100) no-repeat center/contain;
}
.f-fr{
  float: right;
}